<template>
  <div class="box">
    <div :span="4" class="box1">
      <menu-tree></menu-tree>
    </div>
    <div class="box2">
      <ElScrollbar height="100%">
        <menu-form></menu-form>
      </ElScrollbar>
    </div>
    <div class="box3">
      <button-list></button-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMenuDetailAndButtonPermission } from '@/api/system'
import ButtonList from './components/button-list.vue'
import MenuForm from './components/menu-form.vue'
import MenuTree from './components/menu-tree.vue'
import { MenuDetailAndButtonPermission } from '@/api/system/types/menu'
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .left {
    width: 100%;
    height: 100%;
  }

  .box1 {
    width: 20%;
    height: 100%;
    background-color: var(--el-bg-color);
    box-sizing: border-box;
    padding: 15px;
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden;
  }
  .box2 {
    width: 40%;
    height: 100%;
    background-color: var(--el-bg-color);
    box-sizing: border-box;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden;
  }
  .box3 {
    width: 40%;
    height: 100%;
    background-color: var(--el-bg-color);
    box-sizing: border-box;
    padding: 15px;
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden;
  }
}
</style>
